{% extends "nav.html" %}
{% block title %}
View File
{% endblock %}

{% block extraHead %}
<link href="https://mbraak.github.io/jqTree/jqtree.css" rel="stylesheet">
{% endblock %}

{% block body %}

<div class="container">
    {% if file.hidden or lockdown %}
        <div class="row">
            {% if lockdown %}
                <div class="alert alert-danger">
                    <p class="mb-0">Gallery is in Lockdown! Members cannot view content.</p>
                </div>
            {% endif %}
            {% if file.hidden %}
                <div class="col-xs-12">
                    <div class="alert alert-warning">
                        <p class="mb-0">This file has been hidden from members. Avoid viewing in public rooms!</p>
                    </div>
                </div>
            {% endif %}
        </div>
    {% endif %}
    <div class="row">
        <div class="col-xs-12">
            <ul class="breadcrumb">
                {% for p in parents %}
                    {% if loop.first %}
                    <li><a href="/view/dir/{{ p.id }}">CSH Gallery</a></li>
                    {% elif loop.last %}
                    <li class="active">{{ p.get_name() }}</li>
                    {% else %}
                    <li><a href="/view/dir/{{ p.id }}">{{ p.get_name() }}</a></li>
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10 col-md-offset-1 col-sm-12 col-sm-offset-0">
            {% if prev_file != -1 or next_file != -1 %}
                <ul class="pager">
                {% if prev_file != -1 %}
                    <li class="previous"><a href="/view/file/{{prev_file}}">&larr; Previous File</a></li>
                {% endif %}
                {% if next_file != -1 %}
                    <li class="next"><a href="/view/file/{{next_file}}">Next File &rarr;</a></li>
                {% endif %}
                </ul>
            {% endif %}

            {% if file.mimetype.split('/')[0] == "image" %}
                <img id="file-content" src="/api/file/get/{{file.id}}">

            {% elif file.mimetype.split('/')[0] == "video" %}
            <video id="file-content" controls>
                <source src="/api/file/get/{{file.id}}">
            </video>

            {% elif file.mimetype == "application/pdf" or file.mimetype == "text/plain" %}
            <embed id="file-content" src="/api/file/get/{{file.id}}">

            {% elif file.mimetype.split('/')[0] == "audio" %}
            <audio controls>
              <source src="/api/file/get/{{file.id}}">
            </audio>

            {% else %}
                Text Data
            {% endif %}

            {% if display_description %}
            <p id="description"><strong>Description:</strong> {{ description }}</p>
            {% endif %}

            {% if tags|length > 0 %}
            <div id="tags">
              <strong>Tagged: </strong>
              <ul>
                {% for tag in tags %}
                <li>{{ ldap.convert_uuid_to_displayname(tag) }}{% if not loop.last %}, {% endif %}</li>
                {% endfor %}
              </ul>
            </div>
            {% endif %}
            <p><strong>Date Uploaded:</strong> {{ file.date() }}</p>

            {% if prev_file != -1 or next_file != -1 %}
                <ul class="pager">
                {% if prev_file != -1 %}
                    <li class="previous"><a href="/view/file/{{prev_file}}">&larr; Previous File</a></li>
                {% endif %}
                {% if next_file != -1 %}
                    <li class="next"><a href="/view/file/{{next_file}}">Next File &rarr;</a></li>
                {% endif %}
                </ul>
            {% endif %}

                <a href="#!" class="btn btn-primary" onclick="editFileDescription()">Edit</a>

                <div class="modal fade" id="edit-description" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title">Edit</h4>
                            </div>
                            <div class="modal-body text-left">
                                <div class='form-group'>
                                    <label class="control-label" for="rename-{{ file.id }}">Enter a new title for file <strong>{{ file.get_name() }}</strong>:</label>
                                    <input type="text" class="form-control" id="rename-{{ file.id }}" value="{{ file.get_name() }}">
                                    <label class="control-label" for="tag-{{ file.id }}">Tag CSH members in <strong>{{ file.get_name() }}</strong>:</label>
                                    <input type="text" id="tag-{{ file.id }}">
                                    <label class="control-label" for="desc-{{ file.id }}">Enter a new description for file <strong>{{ file.get_name() }}</strong>:</label>
                                    <input type="text" class="form-control" id="desc-{{ file.id }}" value="{{ file.caption }}">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" data-dismiss="modal">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            {% if auth_dict['can_edit'] %}
                <a href="#!" class="btn btn-warning" onclick="moveFile()">Move</a>

                <div class="modal fade" id="move" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title">Select a new parent folder:</h4>
                                <div id="fileList"></div>
                                <div class="form-group">
                                    <input type="number" name="gallery_dir_id" readonly hidden/>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" id="move-{{ file.id }}" class="btn btn-primary" data-dismiss="modal">Move</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>

                <a href="#!" class="btn btn-danger" onclick="deleteFile()">Delete</a>

                <div class="modal fade" id="delete" role="dialog">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title">Are you sure?</h4>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                                <button type="button" id="confirm-{{ file.id }}" class="btn btn-primary" data-dismiss="modal">Yes</button>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            {% if (auth_dict['is_eboard'] or auth_dict['is_rtp']) and file.hidden != True %}
                <a href="#!" class="btn btn-danger" onclick="hideFile()">Hide</a>

                <div class="modal fade" id="hide" role="dialog">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title">Are you sure?</h4>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                                <button type="button" id="hide-{{ file.id }}" class="btn btn-primary" data-dismiss="modal">Yes</button>
                            </div>
                        </div>
                    </div>
                </div>
            {% elif (auth_dict['is_eboard'] or auth_dict['is_rtp']) %}
                <a href="#!" class="btn btn-danger" onclick="showFile()">Show</a>

                <div class="modal fade" id="show" role="dialog">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title">Are you sure?</h4>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                                <button type="button" id="show-{{ file.id }}" class="btn btn-primary" data-dismiss="modal">Yes</button>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<br />
{% endblock %}

{% block extraFooter %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqtree/1.3.5/tree.jquery.min.js"></script>
<script>
    $(function() {
        populateDirTree();
    });
    var mode = "VIEW_FILE";
    var parent = {{ parent }};
    var tags = [];
    {% for tag in tags %}
    tags.push("{{tag}}");
    {% endfor %}
</script>
{% endblock %}
